//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use '../../variables.scss' as *;
@use '../../mixins.scss' as *;

.macroPicker {
  display: flex;
  align-items: stretch;

  textarea {
    @include text-input;

    border-radius: 5px 0 0 5px;

    min-width: 0px;
    width: 100%;
    flex-grow: 1;

    overflow-x: auto;
    white-space: nowrap;

    field-sizing: content;
    resize: none;
    min-height: 100px;

    transition: box-shadow 150ms ease;

    &.invalid {
      box-shadow: 0 0 15px rgba(255, 64, 64, 1) inset;
    }

    // This class is used to add a pulsing glow to the textarea when recording user input.
    &.recording {
      box-shadow: 0 0 15px light-dark(rgba($key-dark, 0.3), rgba($key-light, 0.3)) inset;
      animation: glowing 1s infinite;
    }

    @keyframes glowing {
      0% {
        opacity: 0.7;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.7;
      }
    }
  }
}
